<%--
  作者: 小梁子
  创建时间: 2020/10/10 10:13
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>教室管理</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>教室信息</h5>
                </div>
                <div class="ibox-content">
                    <div <%--style="float: left"--%>style="margin-left: 5%">
                        <button <%--onclick="showEditModal()"--%> type="button" class="btn btn-primary"
                                                                  data-toggle="modal"
                                                                  data-target="#addModal">
                            <i class="fa fa-user-plus"></i>
                        </button>
                        <a onclick=" " href="" class="btn btn-primary "><i class="fa fa-refresh"></i></a>
                    </div>
                    <table class="table table-striped table-bordered table-hover " id=""
                           style="text-align: center;width: 90%;margin-left: 5%;margin-right: 5%">
                        <thead>
                        <tr>
                            <th style="width: 10%;text-align: center">教室编号</th>
                            <th style="width: 10%;text-align: center">教室名</th>
                            <th style="width: 30%;text-align: center">上课信息</th>
                            <th style="width: 10%;text-align: center">可容纳人数</th>
                            <th style="width: 10%;text-align: center">后勤电话</th>
                            <th style="width: 15%;text-align: center">教室状态</th>
                            <th style="text-align: center">操作</th>
                        </tr>
                        </thead>
                        <tbody class="table table-striped table-bordered table-hover" id="tb">

                        </tbody>

                    </table>
                    <div class="margin" style="margin-left: 5%">
                        每一页显示<select id="pageSizeSelect" onchange="onSelectChange()">
                        <option value="2">2</option>
                        <option value="5">5</option>
                        <option value="10">10</option>
                    </select> 条数据，
                        当前是第<span id="currentPageSpan"></span> 页，
                        总共<span id="totalPageSpan"></span> 页
                        <button class="button" onclick="firstPage()">首页</button>
                        <button class="button" onclick="prePage()">上一页</button>
                        <button class="button" onclick="nextPage()">下一页</button>
                        <button class="button" onclick="lastPage()">尾页</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%--添加教室信息模态框--%>
<div class="modal inmodal" id="addModal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" onclick="clearData()" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">关闭</span>
                </button>
                <i class="fa fa-book modal-icon"></i>
                <h4 class="modal-title">添加教室信息</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="classroomIdInput">
                <label class="control-label">教室名</label>
                <input class="form-control" type="text" id="classroomNameInput" placeholder="请输入教室名">
                <label class="control-label">可容纳人数</label>
                <input class="form-control" type="text" id="classroomContainInput" placeholder="请输入人数" maxlength="2"
                       onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                       onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}">
                <label class="control-label">教室状态</label>
                <div class="radio">
                    <label>
                        <input type="radio" value="1" checked="checked" name="number">正常</label>
                    <label>
                        <input type="radio" value="0" name="number">异常</label>
                </div>
                <label class="control-label">负责人电话</label>
                <input class="form-control" type="text" id="classroomPhoneInput" maxlength="11"
                       oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入教室负责人电话号码">
            </div>
            <div class="modal-footer">
                <button class="button btn-primary" onclick="clearData()">取消</button>
                <button class="button btn-primary" onclick="putFormAjax()">确定</button>
            </div>
        </div>
    </div>
</div>


<%--修改教室信息模态框--%>
<div class="modal inmodal" id="editModal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" onclick="clearData()" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">关闭</span>
                </button>
                <i class="fa fa-book modal-icon"></i>
                <h4 class="modal-title">修改教室信息</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="classroomIdEdit">
                <label class="control-label">教室名</label>
                <input class="form-control" type="text" id="classroomNameEdit" placeholder="请输入教室名">
                <label class="control-label">可容纳人数</label>
                <input class="form-control" type="text" id="classroomContainEdit" placeholder="请输入人数" maxlength="2"
                       onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                       onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}">
                <label class="control-label">教室状态</label>
                <div class="radio">
                    <label>
                        <input type="radio" value="0" name="numberEdit">正常</label>
                    <label>
                        <input type="radio" value="1" name="numberEdit">异常</label>
                </div>
                <label class="control-label">负责人电话</label>
                <input class="form-control" type="text" id="classroomPhoneEdit" maxlength="11"
                       oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入教室负责人电话号码">
            </div>
            <div class="modal-footer">
                <button class="button btn-primary" onclick="clearData()">取消</button>
                <button class="button btn-primary" onclick="putEditAjax()">确定</button>
            </div>
        </div>
    </div>
</div>


<!-- 全局js -->
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js?v=3.3.6"></script>


<!-- Peity -->
<script src="${pageContext.request.contextPath}/static/js/plugins/peity/jquery.peity.min.js"></script>

<!-- 自定义js -->
<script src="${pageContext.request.contextPath}/static/js/content.js?v=1.0.0"></script>


<!-- iCheck -->
<script src="${pageContext.request.contextPath}/static/js/plugins/iCheck/icheck.min.js"></script>

<!-- Peity -->
<script src="${pageContext.request.contextPath}/static/js/demo/peity-demo.js"></script>

<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
</script>


<script>
    $(function () {
        loadList();
    });

    //发送修改后的数据
    function putEditAjax() {
        var classroomIdEditVal = $("#classroomIdEdit").val();//获取修改模态框中的值
        var classroomNameEditVal = $("#classroomNameEdit").val();//获取修改模态框中的学生姓名
        var classroomContainEditVal = $("#classroomContainEdit").val();//获取修改模态框中的学生年龄
        var classroomStateEditVal = $('input:radio[name="numberEdit"]:checked').val();//获取修改模态框中的学生性别
        var classroomPhoneEditVal = $("#classroomPhoneEdit").val();//获取修改模态框中的学生电话号码
        var dataValue = {
            "classroomId": classroomIdEditVal,
            "classroomName": classroomNameEditVal,
            "classroomContain": classroomContainEditVal,
            "classroomState": classroomStateEditVal,
            "classroomPhone": classroomPhoneEditVal,
        };
        $.ajax({
            url: "${pageContext.request.contextPath}/classroomInfo/editclassroomInfo",
            type: 'post',
            contentType: "application/x-www-form-urlencoded",
            dataType: 'json',
            data: dataValue,
            success: function (result) {
                if (result.code == 0) {
                    parent.layer.msg("修改教室信息失败", {icon: 2, time: 2000});
                    clearData()//关闭并清空模态编辑框
                    loadList();//刷新页面
                } else {
                    parent.layer.msg("修改教室信息成功", {icon: 1, time: 2000});
                    clearData()//关闭并清空模态编辑框
                    loadList();//刷新页面
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }


    //获取当前记录的教室信息
    function getUserDetail(classroomId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/classroomInfo/getOneClassroomInfoById",
            type: "post",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            data: {"classroomId": classroomId},
            success: function (result) {
                if (result.code == 0) {

                    //自动在模态框中显示值
                    console.log(JSON.stringify(result));
                    $("#classroomIdEdit").val(result.classroom.classroomId);
                    $("#classroomNameEdit").val(result.classroom.classroomName);
                    $("#classroomContainEdit").val(result.classroom.classroomContain);
                    var state = result.classroom.classroomState;
                    if (state == "0") {
                        $("input:radio[name='numberEdit'][value= '0']").prop("checked", "true");
                    } else {
                        $("input:radio[name='numberEdit'][value= '1']").prop("checked", "true");
                    }
                    $("#classroomPhoneEdit").val(result.classroom.classroomPhone);
                    $('#editModal').modal('show')
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //加载教室信息列表数据
    function loadList() {
        $.ajax({
            url: "${pageContext.request.contextPath}/classroomInfo/getClassroomInfo",
            type: 'get',
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showList(result.classroomes);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //显示所有教室信息
    function showList(classroomList) {
        var html = '';
        for (var i = 0; i < classroomList.length; i++) {
            var item = classroomList[i];
            console.log(JSON.stringify(item));
            html += "<tr>";
            html += "<td> " + item.classroomId + "</td>";
            html += "<td>" + item.classroomName + "</td>";
            html += "<td style='text-align: right'> ";
            if (item.records.length == 0) {
                html += "空";
            } else {
                /*html +="教师"+"&nbsp&nbsp&nbsp"+"班级名称"+"&nbsp&nbsp&nbsp"+"课程"+"&nbsp&nbsp&nbsp"+"时间"+"<br>";*/
                for (var x in item.records) {
                    var list = item.records[x];
                    /*html += "<td> " + list.teacher + "</td>";
                    html += "<td> " + list._class + "</td>";
                    html += "<td> " + list.course + "</td>";
                    html += "<td> " + list.date + "</td>";*/
                    html += list.teacher + "&nbsp&nbsp&nbsp";
                    html += list._class + "&nbsp&nbsp&nbsp";
                    html += list.course + "&nbsp&nbsp&nbsp";
                    html += list.date + "<br>";
                }
                html += "<br>";
            }
            html += "</td>";
            html += "<td> " + item.classroomContain + " </td>";
            html += "<td> " + item.classroomPhone + " </td>";
            if (item.classroomState == 0) {
                html += "<td>正常</td>";
            } else {
                html += "<td>异常</i></td>";
            }

            html += "<td><button class='btn btn-primary' onclick='getUserDetail(\"" + item.classroomId + "\")'><i class=\"fa fa-edit\"></i></button>" +
                "&nbsp<button onclick='deleteOneClassroom(\"" + item.classroomId + "\")' class='btn btn-primary'><i class=\"fa fa-trash\"></button></td>";
            html += "</tr>";
        }

        $("#tb").html(html);
    }


    /*点击确定按钮向数据库添加教师信息*/
    function putFormAjax() {
        var classroomNameVal = $("#classroomNameInput").val();//获取输入的教室名
        var classroomContainVal = $("#classroomContainInput").val();//获取输入的教室容纳人数
        var classroomStateVal = $("input:radio[name='numberEdit']").val();//获取输入的教室状态
        var classroomPhoneVal = $("#classroomPhoneInput").val();//获取输入的学生电话号码
        var dataValue = {
            classroomName: classroomNameVal,
            classroomContain: classroomContainVal,
            classroomState: classroomStateVal,
            classroomPhone: classroomPhoneVal,
        };
        console.log(dataValue);
        /*$("#editModal").modal("show");*/

        //通过Ajax把数据传给后台
        $.ajax({
            url: "${pageContext.request.contextPath}/classroomInfo/addClassroomInfo",
            type: 'post',
            contentType: "application/x-www-form-urlencoded",
            dataType: 'json',
            data: dataValue,
            success: function (result) {
                if (result.code == 0) {
                    parent.layer.msg("添加教室信息失败", {icon: 2, time: 2000});
                    clearData()//关闭并清空模态编辑框
                    loadList();//刷新页面
                } else {
                    parent.layer.msg("添加教室信息成功", {icon: 1, time: 2000});
                    clearData()//关闭并清空模态编辑框
                    loadList();//刷新页面
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //逻辑删除一个教室信息
    function deleteOneClassroom(classroomId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/classroomInfo/deletedOneClassroomInfo",
            type: "post",
            dataType: "json",
            contentType: "application/x-www-form-urlencoded",
            data: {"classroomId": classroomId},
            success: function (result) {
                if (result.code == 0) {
                    parent.layer.msg("删除该教室信息失败", {icon: 2, time: 2000});
                    loadList();
                } else {
                    parent.layer.msg("删除该教室信息成功", {icon: 1, time: 2000});
                    loadList();
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //关闭模态框并清空模态框中的数据
    function clearData() {
        //添加模态框清空
        $("#classroomIdInput").val("");
        $("#classroomNameInput").val("");
        $("#classroomContainInput").val("");
        /*$("input:radio[name='number'][value= '0']").prop("checked", true);*/
        $("#classroomPhoneInput").val("");

        //编辑模态框清空
        $("#classroomIdEdit").val("");
        $("#classroomNameEdit").val("");
        $("#classroomContainEdit").val("");
        $("input:radio[name='numberEdit'][value= '1']").prop("checked", false);
        $("input:radio[name='numberEdit'][value= '0']").prop("checked", false);
        $("#classroomPhoneEdit").val("");
        $("#addModal").modal("hide");
        $("#editModal").modal("hide");

    }

</script>
</body>
</html>
